@import "../../style/template";
@import "../../style/vars";

.header {
  background-color: $background-color;
  padding: 1%;
  display: flex;
  justify-content: center;

  &__container {
    display: flex;
    justify-content: space-between;
  }

  &__menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
  }

  &__cart {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__cart-img {
    cursor: pointer;

    @media #{$tablet} {
      width: 30px;
    }
    @media #{$mobile} {
      width: 20px;
    }
  }

  &__category {
    width: 60%;
  }

  &__category-nav {
    display: flex;
  }

  &__category-li {
    list-style-type: none;
    cursor: pointer;
    padding: 0 3% 0 3%;
    @extend %font-text;

    @media #{$tablet} {
      font-size: 15px;
    }
    @media #{$mobile} {
      font-size: 12px;
    }
  }

  &__logo {
    margin-left: 2%;
    padding-right: 2%;
  }

  &__logo-img {
    max-width: 100%;
    width: 100%;

    @media #{$tablet} {
      width: 80%;
    }
    @media #{$mobile} {
      width: 60%;
    }
  }

  &__cart-text {
    @extend %font-text;

    @media #{$tablet} {
      font-size: 15px;
    }
    @media #{$mobile} {
      font-size: 12px;
    }
  }

  .container {
    @extend %container;
  }
}
